<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      append-to-body
      title="数据权限"
  >

    <div>
      <el-form  :label-position="labelPosition"  label-width="90px" ref="form" :model="form"  v-loading="loading">
        <el-form-item prop="className" label="权限类型">
          <el-select v-model="form.type" clearable  placeholder="请选择类型" size="small" style="width: 200px">
            <el-option
                v-for="item in dataRoleList"
                :key="item.code"
                :label="item.value"
                :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="border: 1px solid #E8F0F3;width: 80%;margin-left: 50px" v-if="form.type === 'CUSTOM'">
          <el-tree
              style="height: 350px;overflow: auto"
              size="small"
              show-checkbox
              node-key="deptCode"
              :data="deptData"
              :props="defaultProps"
              ref="tree"
              :default-checked-keys="checkedKeys"
              default-expand-all
              highlight-current>
          </el-tree>
        </div>
      </el-form>
      <div class="btn-group">
        <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
        <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
      </div>
    </div>


  </el-dialog>
</template>

<script>

import {saveRoleDataConfig} from '@/api/role'
import {getDicItem} from "@/utils/dicUtil";
import {queryDeptVo} from "@/api/dept";
export default {
  data(){
    return {
      labelPosition:'right',
      dialogVisible: false,
      loading: false,
      dataRoleList:[],
      form: {
        roleCode:"",
        type:"",
        customDeptCode:""
      },
      dbDataRole:{
        roleCode:"",
        type:"",
        customDeptCode:""
      },
      deptData:[],
      defaultProps:{
        children: 'child',
        label: 'deptName'
      },
      checkedKeys:[]
    }
  },
  created(){
    this.dataRoleList = getDicItem("DATA_ROLE_TYPE");
    this.queryDeptData();
  },
  methods:{
    async queryDeptData(){
      let res = await queryDeptVo();
      let data = res.data;
      this.deptData = data.child;
    },
    showDialog(roleCode,dataRole){
      this.dialogVisible = true
      this.form.roleCode = roleCode;
      this.dbDataRole = dataRole;
      if(this.dbDataRole != null){
        this.form.type = this.dbDataRole.type;
        this.form.customDeptCode = this.dbDataRole.customDeptCode;
        if(this.form.customDeptCode != null){
          this.checkedKeys = this.form.customDeptCode.split(",");
        }
      }
    },
    closeDialog(){
      this.form = {}
      this.dialogVisible = false
      this.loading = false
    },

    getCheckNods(){
      if(this.form.type !== 'CUSTOM'){
        return "";
      }
      let nodes = this.$refs.tree.getCheckedNodes();
      let resourceIds = [];
      for(let i in nodes){
        let node = nodes[i];
        resourceIds.push(node.deptCode);
      }
      console.log(resourceIds);
      return resourceIds.join(",");
    },
    submit(){
      this.$refs.form.validate(async valid => {
        if(valid){
          try{
            this.loading = true
            this.form.customDeptCode = this.getCheckNods();
            let res = await saveRoleDataConfig(this.form);
            if(res.status === '200'){
              this.$message.success('保存')
              this.closeDialog()
              this.$emit('success')
            }else{
              this.$message.error(res.msg)
              this.loading = false
            }
          }catch{
            this.loading = false
          }
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>